<template>
  <div id="app">
    <nav class="navbar">
      <router-link to="/slot" class="nav-link">插槽练习</router-link>
      <router-link to="/order" class="nav-link">用户订单的物流信息</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
    }
  }
}
</script>

<style scoped>
/* 全局样式可以在这里定义，或者使用外部CSS文件 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.navbar {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  background-color: #333;
  /* 背景色 */
  padding: 10px 0;
  /* 内边距 */
}

.nav-link {
  color: white;
  /* 文本颜色 */
  text-decoration: none;
  /* 去除下划线 */
  padding: 10px 20px;
  /* 内边距，增加点击区域 */
  margin: 0 10px;
  /* 外边距，增加链接之间的间距 */
  border-radius: 5px;
  /* 圆角 */
  transition: background-color 0.3s ease;
  /* 过渡效果 */
}

/* .nav-link:hover { */
/* background-color: #575757; */
/* 悬停时的背景色 */
/* } */

.router-link-exact-active {
  background-color: purple;
}

/* 响应式设计示例 */
@media (max-width: 600px) {
  .navbar {
    flex-direction: column;
    /* 垂直排列 */
    align-items: center;
    /* 垂直居中 */
    text-align: center;
    /* 文本居中 */
  }

  .nav-link {
    margin: 10px 0;
    /* 上下边距 */
  }
}
</style>